<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input size="small" placeholder="成品加工单号" style="width: 250px" v-model.trim="form.processing_code" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input size="small" placeholder="sku编码" style="width: 250px" v-model.trim="form.sku_id" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.wh_id" size="small" placeholder="仓库类型" style="width: 110px" clearable>
                        <el-option :value=1 label="主仓"></el-option>
                        <el-option :value=2 label="销退仓"></el-option>
                        <el-option :value=3 label="进货仓"></el-option>
                        <el-option :value=4 label="次品仓"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.warehouse" size="small" placeholder="仓库名称" style="width: 110px" disabled>
                        <el-option value="SSY" label="十三余"></el-option>
                        <el-option value="YXRG" label="有香如故"></el-option>
                        <el-option value="YXYM" label="一弦一木"></el-option>
                        <el-option value="JS" label="锦瑟"></el-option>
                        <el-option value="QYX" label="七月夕"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-popover placement="bottom" width="450" trigger="click">
                        <el-form label-width="90px" label-position="left">
                            <el-form-item label="推送状态">
                                <el-select v-model="form.status" size="small" placeholder="推送状态" style="width: 80%" clearable>
                                    <el-option :value=0 label="推送失败"></el-option>
                                    <el-option :value=1 label="推送成功"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="回货单号">
                                <el-input size="small" placeholder="WMS入库回货单号" style="width: 80%" v-model.trim="form.io_id" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="采购通知单">
                                <el-input size="small" placeholder="OMS采购通知单" style="width: 80%" v-model.trim="form.po_id" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="回货日期">
                                <el-date-picker value-format="yyyy-MM-dd" v-model="form.io_date" type="daterange" size="small" style="width: 80%"
                                                range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                            </el-form-item>
                        </el-form>
                        <el-button slot="reference" size="small" type="warning" plain>更多</el-button>
                    </el-popover>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="btnLoading">查询
                    </el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="mini" :summary-method="getSummaries" show-summary>
                <el-table-column label="入库回货单号" prop="io_id" width="150"></el-table-column>
                <el-table-column label="仓库名称" align="center" prop="warehouse" width="80"></el-table-column>
                <el-table-column label="SKU编码" align="center" prop="sku_id" width="150"></el-table-column>
                <el-table-column label="加工单" align="center" prop="processing_code" width="150"></el-table-column>
                <el-table-column label="采购通知单" align="center" prop="po_id" width="150"></el-table-column>
                <el-table-column label="数量" align="center" prop="qty" width="80"></el-table-column>
                <el-table-column label="回货日期" align="center" prop="io_date" width="135"></el-table-column>
                <el-table-column label="推送状态" align="center" prop="push_status" width="80">
                    <template scope="{ row }">
                        <el-tag size="mini" v-if="row.push_status===0" type="danger">推送失败</el-tag>
                        <el-tag size="mini" v-else-if="row.push_status===1" type="success">推送成功</el-tag>
                        <el-tag size="mini" v-else type="info">未推送</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="data" label="推送数据">
                    <template slot-scope="{ row }">
                        <el-popover v-if="row.push_data" placement="right-start" width="400" trigger="click">
                            <div style="overflow-y: auto" :style="{'max-height': tableHeight+'px'}">
                                <jsonview :json="JSON.parse(row.push_data)"></jsonview>
                            </div>
                            <div slot="reference" class="ellipsis">{{row.push_data}}</div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="error" label="响应信息">
                    <template slot-scope="{ row }">
                        <el-popover v-if="row.push_error" placement="right-start" width="400" trigger="click">
                            <div style="overflow-y: auto" :style="{'max-height': tableHeight+'px'}">
                                <jsonview :json="JSON.parse(row.push_error)"></jsonview>
                            </div>
                            <div slot="reference" class="ellipsis">{{row.push_error}}</div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" fixed="right" width="80">
                    <template slot-scope="{ row }">
                        <el-button type="text" size="mini" class="el-icon-position" @click="pushBtn(row)"
                                   :disabled="!(nodeActions.includes('push') && row.push_status!=1 && !processingCodes.includes(row.processing_code))">&nbsp;推送</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;">
                <Page style="float: right;" :total="total" :current="page" :page-size="limit" show-sizer :page-size-opts="[20, 50, 100, 500]" show-total
                      @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
            </div>
        </el-col>
    </section>
</template>

<script>

import {lmList, lmPush} from "../../../api/log/log";
import jsonview from "../../components/jsonview";

export default {
    name: "sys_log_lmPush",
    components:{jsonview},
    data() {
        return {
            tableHeight: window.innerHeight - 210,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            selectedData: [],
            form: {processing_code: "", sku_id: "", wh_id: 3, io_date: [], ke_date: [], po_id: "", io_id: "", warehouse: "QYX", status: ""},

            //这些加工单不做推送，历史脏数据
            processingCodes:["PO20250218003", "PO20250208002", "PO20250218001", "MO20250314010", "PO20250311019", "MO20250306003", "MO20250403002", "MO20250314015",
            "PO20250318010", "MO20250321002", "MO20250321001", "PO20250304004", "PO20250318010", "MO20250314015", "MO20250314010", "PO20250311001", "PO20250318005"],
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    watch:{

    },
    methods: {
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //页数
        pageSizeChange(pageSize){
            this.limit = pageSize;
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit
            };
            param = Object.assign(param, this.form);
            this.loading = true;
            lmList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
            });
        },
        //合计
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "合计";
                    return;
                }
                const values = data.map((item) => Number(item[column.property]));
                if (!values.every((value) => isNaN(value)) && column.label == "数量") {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                    sums[index] = sums[index];
                } else {
                    sums[index] = "";
                }
            });
            return sums;
        },
        //推送
        pushBtn(row){
            this.$confirm(`【${row.processing_code} ${row.sku_id} ${row.qty}】推送采购入库数到领猫, 是否继续?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.loading = true;
                lmPush({id: row.id}).then((res) =>{
                    this.loading = false;
                    if(res.code === 0){
                        this.$message.success("推送成功");
                    }else{
                        this.$message.error(res.msg);
                    }
                    this.getData();
                }).catch(()=>{
                    this.loading = false;
                })
            }).catch(() => {

            });
        }
    },
    mounted() {
        this.searchBtn();
    }
}
</script>

<style scoped>
.ellipsis {
    overflow: hidden; /* 确保超出容器的内容被裁剪 */
    white-space: nowrap; /* 确保文本在一行内显示 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}
</style>
